<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="http://accesspoint.emccis.com/rest/namespace/dropatmos/css/ui-lightness/jquery-ui-1.8.11.custom.css?uid=0e069767430c4d37997853b058eb0af8%2FEMC007A49DEEA84C837E&expires=4902292718&signature=xaURGq0Yb1mZjoYdRXF14rsBqM8%3D" rel="Stylesheet" />	
<script type="text/javascript" src="http://accesspoint.emccis.com/rest/namespace/emcworld2010/atmos.js?uid=0e069767430c4d37997853b058eb0af8%2FEMC007A49DEEA84C837E&expires=361300450193&signature=FQ%2FHu21ILc0fcr%2F3Okp3FoTIB%2FU%3D"</script>

<script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.0.0-crypto-sha1.js"></script>
<script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.0.0-hmac-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>
<script>
	var tree = "";
	var tabs = "";
	var endpoint = "http://accesspoint.emccis.com";
	
	function parseTree(xmlDoc, nodeObj, path) {
		var openId = nodeObj.id;
		
		// Traverse
		var list = xmlDoc.getElementsByTagName("DirectoryEntry");
		for( var i=0; i<list.length; i++ ) {
			var node = list.item(i);
			var id = node.getElementsByTagName( "ObjectID" )[0].textContent;
			var filetype = node.getElementsByTagName( "FileType" )[0].textContent;
			var filename = node.getElementsByTagName( "Filename" )[0].textContent;
			
			var icon = "/";
			var newPath = path + filename;
			if( filetype == "directory" ) {
				tree.jstree( "create", "#"+openId, "inside", {
					attr: {
						id: id,
						icon: "folder"
					},
					state: "closed",
					data: {
						title: filename,
						attr: {
							id: id+"_data",
							type: filetype,
							name: newPath,
						},
					}
				}, null, true);
			} else {
				
				tree.jstree( "create", "#"+openId, "inside", {
					attr: {
						icon: "/"
					},
					data: {
						title: filename,
						attr: {
							id: id,
							type: filetype,
							name: newPath,
						},
					}
				}, null, true);
			}
			
		}
		
		
	}

	function listFolder( path, nodeObj ) {
		var esu = new AtmosRest(document.forms.atmos.key.value,
				document.forms.atmos.uid.value, endpoint);

		var folderHandler = new Object();
		
		folderHandler.onFailure = function(code) {
			alert("list folder failed with HTTP " + code);
		}
		folderHandler.onSuccess = function(response) {
			parseTree(response, nodeObj, path);
		}
		

		esu.list(path, folderHandler);
	}

	
	function openNode(event, data) {
		var nodeObj = data.rslt.obj[0];
		var openId = nodeObj.id;
		var path = document.forms.atmos.root.value;
		
		if( openId == "tree_root" ) { 
			// List the root
		} else {
			// List the selected path
			var dataNode = document.getElementById( openId + "_data" );
			path = dataNode.name+"/";
		}
		
		listFolder( path, nodeObj )
	}
	
	function clickNode(event, data) {
		var nodeObj = event.currentTarget;
		if( nodeObj.tagName != "A" ) {
			return;
		}
		var openId = nodeObj.id;
		if( openId == "tree_root" ) { 
			return;
		}
		
		var path = nodeObj.name;
		var type = nodeObj.type;
		
		// Only download regular files
		if( type != "regular" ) {
			return;
		}
		
		var esu = new AtmosRest(document.forms.atmos.key.value,
				document.forms.atmos.uid.value, endpoint);
		var shareable = esu.getShareableURL(path, "361300453727");
		
		document.getElementById("shareableUrl").innerHTML = 
			"<a href=\"" + shareable + "\" target=\"_blank\">" + path + "</a>";
	}

	function tabShow(event, data) {
		var selected = tabs.tabs('option', 'selected');
		if( selected == 2 ) {
			// Load Tree
			listFolder();
		}
	}

	jQuery.noConflict();
	jQuery(document).ready(function() {
		tabs = jQuery( "#tabs" ).tabs();
		
		tree = jQuery("#tree").jstree(
			{"plugins" : [ "themes", "crrm", "json_data", "ui" ],
			 "json_data": { data: [{
					data: "root",
					attr: { id: "tree_root" },
					state: "closed",
					children: []
			 }]}
			});
		tree.bind( "open_node.jstree", openNode );
		tree.bind( "click.jstree", clickNode );
		
	});
	
	function tabSelect(event, data) {
		var selected = tabs.tabs('option', 'selected');
		if( selected == 2 ) {
			// Load Tree
			listFolder();
		}
	}
	
</script>

<script type="text/javascript" src="atmosJS/2.0.0-crypto-sha1.js"></script>
<script type="text/javascript" src="atmosJS/2.0.0-hmac-min.js"></script>
<script type="text/javascript" src="atmosJS/atmos.js"></script>
<script type="text/javascript">

window.addEventListener("load", function() {
	var mimetype = "";

        var filename = "";

        var from_datauri = function(data) {
            return data.substring(23,data.length);
        };
    var getmime= function(filename) {
         extension = filename.substring(filename.length-3, filename.length);
         console.log(extension + " extension");
         switch(extension) 
         {
           case "txt":
             mimetype = "text/plain; charset=UTF-8";
             break;
          case "jpg":
             mimetype = "image/jpg; charset=x-user-defined";
             break;
           case "mp4":
             mimetype = "video/mp4; charset=x-user-defined";
             break;
          default:
            console.log("unsupported type!");
                     break;

        } 
        return mimetype;
};

var updater = function () {
console.log(filename + "\t filename");
                var data = input.files[0].getAsDataURL();
                console.log("data length: (raw)" + data.length);
                data = from_datauri(data);
                console.log("data length(post de-DataURI-ification)" + data.length);
                data = atob(data);
                console.log("data length(btoa): " + data.length);
                var atmos = new AtmosRest("YlVdJFb03nYtXZk0lk0KjQplVcI=","0e069767430c4d37997853b058eb0af8/EMC007A49DEEA84C837E", "http://accesspoint.emccis.com");
                mimetype = getmime(filename);
                 
                atmos.update(filename,data,mimetype, { onSuccess : update_good, onFailure : function() {console.log("update failed")} });
      }; 
	var update_good = function () {
         	var atmos = new AtmosRest("YlVdJFb03nYtXZk0lk0KjQplVcI=","0e069767430c4d37997853b058eb0af8/EMC007A49DEEA84C837E", "http://accesspoint.emccis.com");

                var url = atmos.getShareableURL(filename, "361300453727");
                document.getElementById("url_frame").innerHTML = "<a href="+ url+ ">" + filename + "</a>";
		alert("updated Atmos!");
	};
    var input = document.getElementById("photo");
    var img = document.getElementById("img");
    var previewBtn = document.getElementById("preview");
    previewBtn.addEventListener("click", function() {
        filename = document.forms.atmos.root.value;
        filename = filename + document.getElementById("photo").value;
	var atmos = new AtmosRest("YlVdJFb03nYtXZk0lk0KjQplVcI=","0e069767430c4d37997853b058eb0af8/EMC007A49DEEA84C837E", "http://accesspoint.emccis.com");

	atmos.create(filename,"", {onSuccess : updater, onFailure : updater});
	console.log("finished create function");
        img.src = input.files[0].getAsDataURL();
    }, false);

    // handle file upload
    //var form = document.getElementsByTagName("form")[0];
    //var uploader = new Uploader(form);

}, false);
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drop.Atmos</title>
</head>
<body>



<div class="ui-widget ui-widget-header"><h1>Drop.Atmos</h1></div>
<div class="ui-widget ui-widget-content">
<p>Drop.Atmos is a file sharing site powered by EMC Atmos Cloud Storage.  Use your credentials to upload files, manage files, and share files with your friends and co-workers!
</div>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Credentials</a></li>
		<li><a href="#tabs-2">Upload File</a></li>
		<li><a href="#tabs-3">Share Files</a></li>
	</ul>
	<div id="tabs-1">
		<p>Use the form below to configure your Atmos credentials.
		<form id="atmos">
		<table>
		<tr><td>UID</td><td><input id="uid" type="text" value="0e069767430c4d37997853b058eb0af8/EMC007A49DEEA84C837E"></td></tr>
		<tr><td>Key</td><td><input id="key" type="text" value="YlVdJFb03nYtXZk0lk0KjQplVcI="></td></tr>
		<tr><td>dir</td><td><input id="root" type="text" value="/connectic/"></td></tr>
		</table>
		</form>
	</div>
	<div id="tabs-2">

<form action="upload.php" method="post"
      enctype="multipart/form-data" onsubmit="return false;">
    <fieldset>
        <legend>Upload photo</legend>
        <label for="image_type">Image type:</label>
        <input type="file" name="photo" id="photo">
        <input type="submit" value="Upload" id="preview">
<hr>

<p id="url_frame"> </p>
<hr>
        <img src="" alt="image preview" id="img">
    </fieldset>
</form>
	  
	</div>
	<div id="tabs-3" style="height: 650px;">
		<div id="tree" style="width: 400px; height: 600px; overflow: scroll; float: left">
			<ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
		
		</div>
		<div id="url" style="width: 400px; height: 600px; float: left">
			<p>Click on a file in the tree and retrieve your download URL below:</p>
			<div id="shareableUrl" class="ui-widget"></div>
		</div>
	</div>
</div>


</body>
</html>
